<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>表格全选</title>
    <style>
        table{
            border: 1px solid;
            width: 500px;
            margin: auto;
        }
        td,th{
            text-align: center;
            border: 1px solid;
        }
        div{
            width: 500px;
            margin: 5px auto;
        }

        .out{
            background-color: white;
        }
        .over{
            background-color: pink;
        }

    </style>

    <script>
        /*
            分析:
                1.全选
                    获取所有的 checkbox
                    遍历 cd,设置每一个cd的状态值为选中  checked
         */

        //页面加载完成后绑定事件
        window.onload = function () {
            //给全选按钮绑定单击事件
            document.getElementById("selectAll").onclick = function () {
                //全选
                //获取所有的 checkbox
                var cds = document.getElementsByName("cd");
                //遍历
                for (var i = 0; i < cds.length; i++) {
                    //设置每一个 cd 的状态值为选中 checked
                    cds[i].checked = true;
                }
            }

            //给全不选按钮绑定单击事件
            document.getElementById("unSelectAll").onclick = function () {
                //全不选
                //获取所有的 checkbox
                var cds = document.getElementsByName("cd");
                //遍历
                for (var i = 0; i < cds.length; i++) {
                    //设置每一个 cd 的状态值为不选中 checked
                    cds[i].checked = false;
                }
            }

            //给反选按钮绑定单击事件
            document.getElementById("selectRev").onclick = function () {
                //反选
                //获取所有的 checkbox
                var cds = document.getElementsByName("cd");
                //遍历
                for (var i = 0; i < cds.length; i++) {
                    //设置每一个 cd 的状态值为反选 checked
                    cds[i].checked = !cds[i].checked;
                }
            }

            document.getElementById("firstCb").onclick = function () {
                //全选
                //获取所有的 checkbox
                var cds = document.getElementsByName("cd");
                //遍历
                for (var i = 0; i < cds.length; i++) {
                    //设置每一个 cd 的状态值为选中 checked
                    cds[i].checked = this.checked;
                }
            }

            //给所用 tr 绑定鼠标移入事件和移出事件
            var trs = document.getElementsByTagName("tr");
            //遍历
            for (var i = 0; i < trs.length; i++) {
                //移到元素之上
                trs[i].onmouseover = function () {
                    this.className = "over";
                }

                //移出元素
                trs[i].onmouseout = function () {
                    this.className = "out";
                }
            }

        }
    </script>

</head>
<body>

    <table>
        <caption>学生信息表</caption>
        <tr>
            <th><input type="checkbox" name="cd" id="firstCb"></th>
            <th>编号</th>
            <th>姓名</th>
            <th>性别</th>
            <th>操作</th>
        </tr>
        <tr>
            <td><input type="checkbox" name="cd"></td>
            <td>1</td>
            <td>小明</td>
            <td>男</td>
            <td><a href="javascript:void(0);">删除</a></td>
        </tr>
        <tr>
            <td><input type="checkbox" name="cd"></td>
            <td>2</td>
            <td>小猴</td>
            <td>男</td>
            <td><a href="javascript:void(0);">删除</a></td>
        </tr>
        <tr>
            <td><input type="checkbox" name="cd"></td>
            <td>3</td>
            <td>小红</td>
            <td>女</td>
            <td><a href="javascript:void(0);">删除</a></td>
        </tr>
    </table>
    <div>
        <input type="button" id="selectAll" value="全选">
        <input type="button" id="unSelectAll" value="全不选">
        <input type="button" id="selectRev" value="反选">
    </div>

</body>
</html>